<template>
	<view class="logo_main" :style="{height: btom}">
		<view class="navbar">
			<view class="fixed">
				<!-- 状态栏 时间 电量 信号 -->
				<view :style="{height: navbarStatusHeight+'px'}"></view>
				<!-- #ifdef H5 || APP-PLUS || MP-ALIPAY -->
				<view class="header_ele">
					<view class="back_btn" @click="goBack">
						<uni-icons type="back" size="26" color="#fff" class="back_icon"></uni-icons>返回
					</view>
				</view>
				<!-- #endif -->
				<!-- #ifndef H5 || APP-PLUS || MP-ALIPAY -->
				<!-- 胶囊按钮左侧位置 -->
				<view class="navbar-content" :style="{width:navBarWidth+'px',height:navBarHeight+'px'}">
					<view class="back_btn" @click="goBack">
						<uni-icons type="back" size="26" color="#fff" class="back_icon"></uni-icons>返回
					</view>
				</view>
				<!-- #endif -->
			</view>
			<!-- 设置占位 将微信小程序的状态栏高度预留出来 -->
			<view :style="{height:navbarStatusHeight+navBarHeight+'px' }"></view>
		</view>
		<view class="conent_box">
			<view class="title_log_in">
				<p class="m_title">注册</p>
				<p class="tip">填写注册信息</p>
			</view>
			<view class="login">
				<uni-forms :modelValue="registerForm">
					<uni-easyinput type="text" placeholderStyle="font-size:28rpx;" v-model="registerForm.name"
						maxlength="20" placeholder="请输入姓名" />
					<uni-easyinput type="text" placeholderStyle="font-size:28rpx;" v-model="registerForm.inviteCode"
						maxlength="20" placeholder="邀请码" />
					<uni-easyinput type="number" placeholderStyle="font-size:28rpx;" v-model="registerForm.phone"
						maxlength="11" placeholder="请输入手机号" />
					<view class="code_re">
						<uni-easyinput type="number" placeholderStyle="font-size:28rpx;" :clearable="false"
							maxlength="6" v-model="registerForm.code" placeholder="请输入验证码" />
						<view class="code_text" @click="getCode" v-if="count==0">
							获取验证码
						</view>
						<view class="code_text_" v-else>
							({{count}}s)后重新获取
						</view>
					</view>
					<uni-easyinput type="password" placeholderStyle="font-size:28rpx;" v-model="registerForm.password"
						placeholder="请输入密码" @input="nextTick(()=>registerForm.password=pattern($event))" />
					<uni-easyinput type="password" placeholderStyle="font-size:28rpx;" v-model="registerForm.password2"
						placeholder="请确认密码" @input="nextTick(()=>registerForm.password2=pattern($event))" />
				</uni-forms>
			</view>
			<view class="btn">
				<button type="primary" color="#007cff"
					:class="{btn_bg:registerForm.phone?.length==11&&registerForm.password&&checked&&registerForm.code.length==6}"
					class="btn_sty"
					:disabled="!(registerForm.phone?.length==11&&registerForm.password&&checked&&registerForm.code.length==6)"
					@click="onRegister">注册</button>
			</view>
			<view class="look_agree">
				<radio :checked="checked" @click="radioChange" color="#007cff" style="transform:scale(0.8)"></radio>
				<view class="l_text">我已阅读并同意<view class="link_a">《服务协议》</view>和<view class="link_a">《隐私政策》</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import {
		ref,
		onMounted,
		nextTick
	} from "vue"
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import apiCode from '@/util/network_api/getcode.js'
	import apiLogin from '@/util/network_api/login.js'
	import md5 from 'js-md5';
	const registerForm = ref({
		name: '',
		phone: '', //手机号
		password: '', //登录密码
		password2: '',//确认密码
		code: "", //验证码
		inviteCode: '', //邀请码
	})
	const checked = ref(false) //协议
	const radioChange = (e) => {
		checked.value = !checked.value
	}
	// 校验密码非中文
	const pattern = (v) => {
		return v.replace(/[\u4E00-\u9FA5\s]/g, '')
	}
	const count = ref(0) //倒计时
	const clear = ref(null)
	onLoad((option) => {

	})
	// 返回
	const goBack = () => {
		uni.reLaunch({
			url: '/pages/pages_network/login/login'
		})
	}
	// 获取验证码
	const getCode = async () => {
		if (!/^1[^1^2]\d{9}$/.test(registerForm.value.phone)) {
			uni.showToast({
				title: '请输入正确的手机号!',
				position: 'top',
				icon: "none"
			});
			return;
		}
		count.value = 59
		clear.value = setInterval(() => {
			count.value -= 1
			if (count.value == 0) {
				clearInterval(clear.value)
			}
		}, 1000)
		await apiCode.registerCode({
			phone: registerForm.value.phone
		}).then(res => {
			if (res.code === 20000) {
				uni.showToast({
					title: res.message,
					icon: 'none',
					position: 'top',
				})
			}
		})
	}

	// 注册登录
	const onRegister = async () => {
		if (!/^1[^1^2]\d{9}$/.test(registerForm.value.phone)) {
			uni.showToast({
				title: '请输入正确的手机号!',
				position: 'top',
				icon: "none"
			});
			return;
		}

		if (registerForm.value.password == '') {
			uni.showToast({
				title: '请输入密码!',
				position: 'top',
				icon: "none"
			});
			return;
		}
		if (registerForm.value.password != registerForm.value.password2) {
			uni.showToast({
				title: '密码不一致!',
				position: 'top',
				icon: "none"
			});
			return;
		}
		if (!checked.value) {
			if (registerForm.value.code == '') {
				uni.showToast({
					message: '请输入验证码!',
					position: 'top'
				});
				return;
			}
			uni.showToast({
				title: '请勾选同意!',
				position: 'top',
				icon: "none"
			});
			return;
		}
		await successfullyLogin()
	}
	const successfullyLogin = async () => {
		//显示加载框
		uni.showLoading({
			title: '加载中',
			mask: true
		});
		let dataObj = JSON.parse(JSON.stringify(registerForm.value))
		delete dataObj.password2
		dataObj.password = (md5 as any)(registerForm.value.password)//加密
		await apiLogin.register(dataObj).then(res => {
			//隐藏加载框
			uni.hideLoading();

			if (res.code === 20000) {
				uni.showToast({
					title: res.message,
					position: 'top',
					icon: 'none',
				});
				// 登录成功后跳转
				uni.reLaunch({
					url: '/pages/pages_network/login/login'
				})
			}
		})
		uni.hideLoading();
	}
	const navbarStatusHeight = ref(0)
	const navBarHeight = ref(0)
	const navBarWidth = ref(375)
	const btom = ref('')
	onMounted(() => {
		const info = uni.getSystemInfoSync()
		btom.value = uni.getWindowInfo().windowHeight + "px"
		navbarStatusHeight.value = info.statusBarHeight
		// 根据微信小程序的右上侧的胶囊样式 设置导航栏内容的高度
		// 条件编译 以下三个不支持胶囊样式
		// #ifndef H5 || APP-PLUS || MP-ALIPAY
		const menuInfo = uni.getMenuButtonBoundingClientRect()
		// 导航栏内容的高度 = (胶囊底部的高度 - 状态栏的高度) + (胶囊顶部的高度 - 状态栏的高度)
		navBarHeight.value = (menuInfo.bottom - info.statusBarHeight) + (menuInfo.top - info.statusBarHeight)
		// 导航栏内容的宽度  除开胶囊按钮左侧的内容宽度
		navBarWidth.value = menuInfo.left
		// #endif
	})
</script>

<style lang="scss" scoped>
	.logo_main {
		// background-image: url('/static/network/login/bg_login.png');
		background: linear-gradient(#007cff 10%, #fff 30%);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: top;
		height: 100vh;
		overflow-y: auto;

		.navbar {
			.fixed {
				position: fixed;
				top: 0;
				left: 0;
				z-index: 99;
				width: 100%;

				.navbar-content {
					display: flex;
					align-items: center;

					.back_btn {
						display: flex;
						align-items: center;
						font-size: 32rpx;
						margin-left: 12rpx;
						color: #fff;

						.back_icon {
							width: 50rpx;
						}
					}
				}

				.header_ele {
					.back_btn {
						padding: 40rpx 20rpx 40rpx;
						display: flex;
						align-items: center;
						font-size: 32rpx;
						color: #fff;

						.back_icon {
							width: 50rpx;
						}
					}
				}
			}
		}

		.conent_box {
			/* #ifdef MP-WEIXIN */
			padding: 50rpx 60rpx 20rpx;
			/* #endif */
			/* #ifndef MP-WEIXIN */
			padding: 120rpx 60rpx 20rpx;
			/* #endif */

			.title_log_in {
				margin: 40rpx 0 60rpx;

				.m_title {
					font-size: 48rpx;
					color: #fff;
					font-weight: 700;
					margin-bottom: 20rpx;
				}

				.tip {
					font-size: 28rpx;
					color: #fff;
				}
			}

			.login {
				:deep(.is-input-border) {
					// border-radius: 80rpx !important;
					// background-color: rgba(243, 244, 248, 1) !important;
					background-color: transparent !important;
					// padding: 10rpx;
					margin: 20rpx 0;
					border: none;
					border-bottom: 1rpx solid #ccc;
					border-radius: 0;
					height: 90rpx;

					&.is-focused {

						.uniui-clear,
						.uniui-eye-filled {
							color: #007cff99 !important;
						}
					}
				}

				.code_re {
					position: relative;

					.code_text {
						height: 30rpx;
						line-height: 30rpx;
						font-size: 28rpx;
						color: #007cff;
						position: absolute;
						top: calc(50% - 15rpx);
						right: 30rpx;
						z-index: 2;
					}

					.code_text_ {
						height: 30rpx;
						line-height: 30rpx;
						font-size: 28rpx;
						color: #999;
						position: absolute;
						top: calc(50% - 15rpx);
						right: 30rpx;
					}
				}

			}

			.hint {
				margin-left: 60rpx;
				margin-bottom: 10rpx;
			}

			.look_agree {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: rgba(128, 128, 128, 1);
				margin-top: 20rpx;

				.l_text {
					display: flex;
					align-items: center;

					.link_a {
						color: #007cff;
					}
				}
			}

			.btn {
				margin-top: 40rpx;

				.btn_sty {
					border-radius: 80rpx;
					background-color: #007cff6b;
					line-height: 90rpx;
					height: 90rpx;
					font-size: 32rpx;
					color: #fff;
				}

				:deep(button::after) {
					border: none !important;
				}

				.btn_bg {
					background-color: #007cff;
				}
			}
		}
	}
</style>